// src/stores/app.js
import { defineStore } from 'pinia'
import { ref, watchEffect } from 'vue'

export const useAppStore = defineStore('app', () => {
  const sidebarCollapsed = ref(false)
  const showSettings = ref(false)

  // 主题：light / dark
  const isDark = ref(localStorage.getItem('theme') === 'dark')

  // 将主题应用到 <html data-theme="...">
  const applyTheme = () => {
    const theme = isDark.value ? 'dark' : 'light'
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }

  // 初始化时立即应用
  applyTheme()

  // 响应变化（保险）
  watchEffect(applyTheme)

  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }

  const toggleSettings = () => {
    showSettings.value = !showSettings.value
  }

  const toggleTheme = () => {
    isDark.value = !isDark.value
  }

  return {
    sidebarCollapsed,
    showSettings,
    isDark,
    toggleSidebar,
    toggleSettings,
    toggleTheme
  }
})